<h3>Animations
   <small>animo is a powerful little tool that makes managing CSS animations extremely easy.</small>
</h3>
<!-- START row-->
<div class="row">
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounce" class="panel panel-default">
         <div class="panel-heading">bounce</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounce" data-play="bounce">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-flash" class="panel panel-default">
         <div class="panel-heading">flash</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-flash" data-play="flash">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-pulse" class="panel panel-default">
         <div class="panel-heading">pulse</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-pulse" data-play="pulse">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rubberBand" class="panel panel-default">
         <div class="panel-heading">rubberBand</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rubberBand" data-play="rubberBand">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-shake" class="panel panel-default">
         <div class="panel-heading">shake</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-shake" data-play="shake">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-swing" class="panel panel-default">
         <div class="panel-heading">swing</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-swing" data-play="swing">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-tada" class="panel panel-default">
         <div class="panel-heading">tada</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-tada" data-play="tada">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-wobble" class="panel panel-default">
         <div class="panel-heading">wobble</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-wobble" data-play="wobble">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceIn" class="panel panel-default">
         <div class="panel-heading">bounceIn</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceIn" data-play="bounceIn">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceInDown" class="panel panel-default">
         <div class="panel-heading">bounceInDown</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceInDown" data-play="bounceInDown">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceInLeft" class="panel panel-default">
         <div class="panel-heading">bounceInLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceInLeft" data-play="bounceInLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceInRight" class="panel panel-default">
         <div class="panel-heading">bounceInRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceInRight" data-play="bounceInRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceInUp" class="panel panel-default">
         <div class="panel-heading">bounceInUp</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceInUp" data-play="bounceInUp">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceOut" class="panel panel-default">
         <div class="panel-heading">bounceOut</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceOut" data-play="bounceOut">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceOutDown" class="panel panel-default">
         <div class="panel-heading">bounceOutDown</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceOutDown" data-play="bounceOutDown">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceOutLeft" class="panel panel-default">
         <div class="panel-heading">bounceOutLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceOutLeft" data-play="bounceOutLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceOutRight" class="panel panel-default">
         <div class="panel-heading">bounceOutRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceOutRight" data-play="bounceOutRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-bounceOutUp" class="panel panel-default">
         <div class="panel-heading">bounceOutUp</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-bounceOutUp" data-play="bounceOutUp">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeIn" class="panel panel-default">
         <div class="panel-heading">fadeIn</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeIn" data-play="fadeIn">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeInDown" class="panel panel-default">
         <div class="panel-heading">fadeInDown</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeInDown" data-play="fadeInDown">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeInDownBig" class="panel panel-default">
         <div class="panel-heading">fadeInDownBig</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeInDownBig" data-play="fadeInDownBig">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeInLeft" class="panel panel-default">
         <div class="panel-heading">fadeInLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeInLeft" data-play="fadeInLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeInLeftBig" class="panel panel-default">
         <div class="panel-heading">fadeInLeftBig</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeInLeftBig" data-play="fadeInLeftBig">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeInRight" class="panel panel-default">
         <div class="panel-heading">fadeInRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeInRight" data-play="fadeInRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeInRightBig" class="panel panel-default">
         <div class="panel-heading">fadeInRightBig</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeInRightBig" data-play="fadeInRightBig">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeInUp" class="panel panel-default">
         <div class="panel-heading">fadeInUp</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeInUp" data-play="fadeInUp">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeInUpBig" class="panel panel-default">
         <div class="panel-heading">fadeInUpBig</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeInUpBig" data-play="fadeInUpBig">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOut" class="panel panel-default">
         <div class="panel-heading">fadeOut</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOut" data-play="fadeOut">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOutDown" class="panel panel-default">
         <div class="panel-heading">fadeOutDown</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOutDown" data-play="fadeOutDown">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOutDownBig" class="panel panel-default">
         <div class="panel-heading">fadeOutDownBig</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOutDownBig" data-play="fadeOutDownBig">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOutLeft" class="panel panel-default">
         <div class="panel-heading">fadeOutLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOutLeft" data-play="fadeOutLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOutLeftBig" class="panel panel-default">
         <div class="panel-heading">fadeOutLeftBig</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOutLeftBig" data-play="fadeOutLeftBig">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOutRight" class="panel panel-default">
         <div class="panel-heading">fadeOutRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOutRight" data-play="fadeOutRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOutRightBig" class="panel panel-default">
         <div class="panel-heading">fadeOutRightBig</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOutRightBig" data-play="fadeOutRightBig">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOutUp" class="panel panel-default">
         <div class="panel-heading">fadeOutUp</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOutUp" data-play="fadeOutUp">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-fadeOutUpBig" class="panel panel-default">
         <div class="panel-heading">fadeOutUpBig</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-fadeOutUpBig" data-play="fadeOutUpBig">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-flip" class="panel panel-default">
         <div class="panel-heading">flip</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-flip" data-play="flip">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-flipInX" class="panel panel-default">
         <div class="panel-heading">flipInX</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-flipInX" data-play="flipInX">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-flipInY" class="panel panel-default">
         <div class="panel-heading">flipInY</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-flipInY" data-play="flipInY">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-flipOutX" class="panel panel-default">
         <div class="panel-heading">flipOutX</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-flipOutX" data-play="flipOutX">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-flipOutY" class="panel panel-default">
         <div class="panel-heading">flipOutY</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-flipOutY" data-play="flipOutY">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-lightSpeedIn" class="panel panel-default">
         <div class="panel-heading">lightSpeedIn</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-lightSpeedIn" data-play="lightSpeedIn">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-lightSpeedOut" class="panel panel-default">
         <div class="panel-heading">lightSpeedOut</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-lightSpeedOut" data-play="lightSpeedOut">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateIn" class="panel panel-default">
         <div class="panel-heading">rotateIn</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateIn" data-play="rotateIn">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateInDownLeft" class="panel panel-default">
         <div class="panel-heading">rotateInDownLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateInDownLeft" data-play="rotateInDownLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateInDownRight" class="panel panel-default">
         <div class="panel-heading">rotateInDownRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateInDownRight" data-play="rotateInDownRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateInUpLeft" class="panel panel-default">
         <div class="panel-heading">rotateInUpLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateInUpLeft" data-play="rotateInUpLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateInUpRight" class="panel panel-default">
         <div class="panel-heading">rotateInUpRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateInUpRight" data-play="rotateInUpRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateOut" class="panel panel-default">
         <div class="panel-heading">rotateOut</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateOut" data-play="rotateOut">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateOutDownLeft" class="panel panel-default">
         <div class="panel-heading">rotateOutDownLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateOutDownLeft" data-play="rotateOutDownLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateOutDownRight" class="panel panel-default">
         <div class="panel-heading">rotateOutDownRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateOutDownRight" data-play="rotateOutDownRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateOutUpLeft" class="panel panel-default">
         <div class="panel-heading">rotateOutUpLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateOutUpLeft" data-play="rotateOutUpLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rotateOutUpRight" class="panel panel-default">
         <div class="panel-heading">rotateOutUpRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rotateOutUpRight" data-play="rotateOutUpRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-hinge" class="panel panel-default">
         <div class="panel-heading">hinge</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-hinge" data-play="hinge">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rollIn" class="panel panel-default">
         <div class="panel-heading">rollIn</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rollIn" data-play="rollIn">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-rollOut" class="panel panel-default">
         <div class="panel-heading">rollOut</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-rollOut" data-play="rollOut">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomIn" class="panel panel-default">
         <div class="panel-heading">zoomIn</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomIn" data-play="zoomIn">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomInDown" class="panel panel-default">
         <div class="panel-heading">zoomInDown</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomInDown" data-play="zoomInDown">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomInLeft" class="panel panel-default">
         <div class="panel-heading">zoomInLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomInLeft" data-play="zoomInLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomInRight" class="panel panel-default">
         <div class="panel-heading">zoomInRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomInRight" data-play="zoomInRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomInUp" class="panel panel-default">
         <div class="panel-heading">zoomInUp</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomInUp" data-play="zoomInUp">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomOut" class="panel panel-default">
         <div class="panel-heading">zoomOut</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomOut" data-play="zoomOut">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomOutDown" class="panel panel-default">
         <div class="panel-heading">zoomOutDown</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomOutDown" data-play="zoomOutDown">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomOutLeft" class="panel panel-default">
         <div class="panel-heading">zoomOutLeft</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomOutLeft" data-play="zoomOutLeft">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomOutRight" class="panel panel-default">
         <div class="panel-heading">zoomOutRight</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomOutRight" data-play="zoomOutRight">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-2">
      <!-- START panel-->
      <div id="panel-anim-zoomOutUp" class="panel panel-default">
         <div class="panel-heading">zoomOutUp</div>
         <div class="panel-body">
            <!-- Animation trigger-->
            <a href="#" animate="" data-target="#panel-anim-zoomOutUp" data-play="zoomOutUp">
               <em class="fa fa-play fa-2x"></em>
            </a>
         </div>
      </div>
      <!-- END panel-->
   </div>
</div>
<!-- END row-->
<h3 class="page-header">Trigger Animations on Scroll</h3>
<div class="row">
   <div class="col-md-4">
      <!-- START panel-->
      <div animate="" data-play="bounceIn" data-offset="0" class="panel panel-default">
         <div class="panel-heading">bounceIn</div>
         <div class="panel-body">
            <code>animate</code>
            <code>data-play="bounceIn"</code>
            <code>data-offset="0"</code>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-4">
      <!-- START panel-->
      <div animate="" data-play="fadeInDown" data-offset="0" class="panel panel-default">
         <div class="panel-heading">fadeInDown</div>
         <div class="panel-body">
            <code>animate</code>
            <code>data-play="fadeInDown"</code>
            <code>data-offset="0"</code>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-4">
      <!-- START panel-->
      <div animate="" data-play="fadeInLeftBig" data-offset="0" data-delay="1000" class="panel panel-default">
         <div class="panel-heading">fadeInLeftBig</div>
         <div class="panel-body">
            <code>animate</code>
            <code>data-play="fadeInLeftBig"</code>
            <code>data-offset="0"</code>
            <code>data-delay="1000"</code>
         </div>
      </div>
      <!-- END panel-->
   </div>
</div>